<template>
  <el-card shadow="never">
    <div class="descriptions_box">
      <table class="descriptions_table">
        <tr class="descriptions_row">
          <th colspan="1" class="descriptions_label">
            <i class="el-icon-mobile-phone"></i>手机号
          </th>
          <td colspan="2" class="descriptions_content">
            {{ detailInfo.phone }}
            <i v-clipboard:copy='getCopyData(detailInfo.phone)' v-clipboard:success='clipboardSuccess' title="复制电话" class="el-icon-copy-document"/>
          </td>
          <th colspan="1" class="descriptions_label">
            提交时间
          </th>
          <td colspan="2" class="descriptions_content">
            {{ detailInfo.created_at }}
          </td>
        </tr>
        <tr class="descriptions_row">
          <th colspan="1" class="descriptions_label">
            领取人
          </th>
          <td colspan="2" class="descriptions_content">
            {{ detailInfo.u_name }} 【{{ detailInfo.u_nick}}】
          </td>
          <th colspan="1" class="descriptions_label">
            领取时间
          </th>
          <td colspan="2" class="descriptions_content">
            {{ detailInfo.update_at }}
          </td>
        </tr>
        <tr class="descriptions_row">
          <th colspan="1" class="descriptions_label ">
            提交地址
          </th>
          <td colspan="2" class="descriptions_content">
            {{ detailInfo.path }}
          </td>
          <th colspan="1" class="descriptions_label ">
            首次访问地址</th>
          <td colspan="2" class="descriptions_content">
            {{ detailInfo.path_f }}
          </td>
        </tr>
        <tr class="descriptions_row">
          <th colspan="1" class="descriptions_label ">
            商标
          </th>
          <td colspan="2" class="descriptions_content">
            {{ detailInfo.brand }}
          </td>
          <th colspan="1" class="descriptions_label ">
            搜索词
          </th>
          <td colspan="2" class="descriptions_content">
            {{ detailInfo.search }}
          </td>
        </tr>
        <tr class="descriptions_row">
          <th colspan="1" class="descriptions_label ">
            来源类型
          </th>
          <td colspan="2" class="descriptions_content">
            {{ detailInfo.source_type_name }}
          </td>
          <th colspan="1" class="descriptions_label ">
            来源
          </th>
          <td colspan="2" class="descriptions_content">
            {{ detailInfo.source_name }}
          </td>
        </tr>
        <tr class="descriptions_row">
          <th colspan="1" class="descriptions_label ">
            是否放弃
          </th>
          <td colspan="2" class="descriptions_content">
            {{ detailInfo.type == 1 ? '是' : '否' }}
          </td>
          <th colspan="1" class="descriptions_label ">
            状态
          </th>
          <td colspan="2" class="descriptions_content">
            <span v-if="detailInfo.type != 0">{{ state_data[detailInfo.state || 0].label }}</span>
            <el-select v-else v-model="detailInfo.state" placeholder="请选择">
              <el-option
                  v-for="item in state_data"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </td>
        </tr>
        <tr class="descriptions_row">
          <th colspan="1" class="descriptions_label ">
            备注
          </th>
          <td colspan="5" class="descriptions_content">
            {{ detailInfo.remark }}
          </td>
        </tr>
        <tr class="descriptions_row">
          <th colspan="1" class="descriptions_label ">
            操作
          </th>
          <td colspan="5" class="descriptions_content">
            <el-button v-if="detailInfo.file == 1" type="primary" @click="filePage()">文件管理</el-button>
            <el-button v-if="detailInfo.type == 0" type="primary" @click="editState()">修改状态</el-button>
            <el-button v-if="detailInfo.type == 0" type="primary" @click="editRemark()">修改备注</el-button>

            <el-button v-if="detailInfo.type == 0 && detailInfo.source_type == 0" type="danger" @click="loseHandle">放弃</el-button>
          </td>
        </tr>
      </table>
    </div>
  </el-card>
</template>
<script>
import clipboard from '@/directive/clipboard/index.js'
import { getDetail, loseInfo, setRemark, setState }  from '@/api/info'

export default {
  name: 'tenant',
  directives: { clipboard },
  data() {
    return {
      loading: false,
      id: 0,
      detailInfo: {
        id: 0,
        phone: '',
        created_at: '',
      },
      state_data: [
        {value: 1,label: '新领取'},
        {value: 2,label: '意向（已加联系方式）'},
        {value: 3,label: '已签单'},
        {value: 4,label: '手机空号'},
        {value: 5,label: '非本人查询'},
        {value: 6,label: '查询自己业务'},
        {value: 7,label: '查询他人业务'},
        {value: 8,label: '打通但不加微信或QQ'},
        {value: 9,label: '不需要产品'},
        {value: 10,label: '同行'},
        {value: 11,label: '合同已发，等待回复'},
        {value: 12,label: '正在办理工商执照'},
        {value: 13,label: '正在取商标名，等名称确定'},
        {value: 14,label: '自报家门挂断就挂断'},
        {value: 15,label: '不同意联系方式'},
      ],
    }
  },
  computed: {

  },
  mounted() {
    this.id = this.$route.params.id
    this.getDetailInfo()
  },
  destroyed() {
    window.onresize = null
  },
  methods: {
    getDetailInfo() {
      getDetail(this.id).then(res => {
        this.detailInfo = res.data.detail
      })
    },
    filePage() {
      this.$router.push(`/file/${this.id}`)
    },
    loseHandle() {
      this.$confirm('是否确认放弃？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(_ => {
        loseInfo(this.id).then(res => {
          this.$message.success('放弃成功')
          this.getDetailInfo()
        })
      }).catch(() => {

      })
    },
    getCopyData(content) {
      return content
    },
    clipboardSuccess() {
      this.$message.success('复制成功')
    },
    editRemark() {
      this.$prompt('修改备注', '', {
        confirmButtonText: '确认保存',
        cancelButtonText: '取消',
        inputValue: this.detailInfo.remark
      }).then(content => {
        setRemark({id: this.detailInfo.id, remark: content.value}).then(res => {
          this.detailInfo.remark = content.value
          this.$message.success('保存成功')
        })
      }).catch(() => {
      })
    },
    editState() {
      setState({id: this.detailInfo.id, state: this.detailInfo.state}).then(res => {
        this.$message.success('保存成功')
      })
    }
  }
}
</script>
<style scoped lang="scss">
.descriptions_box {
  color: #606266;
  background-color: #fff;
  font-size: 12px;
}

.descriptions_box .descriptions_table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.descriptions_label {
  padding: 10px;
}

.descriptions_box .descriptions_table .descriptions_label,.descriptions_box .descriptions_table .descriptions_content {
  box-sizing: border-box;
  text-align: left;
  font-weight: 400;
  line-height: 1.5;
  border: 1px solid #ebeef5;
  padding: 12px 10px;
}

.descriptions_label {
  font-weight: 700;
  color: #909399;
  background: #fafafa;
}
</style>
